<template>
  <div>
    <!-- 地址 -->
    <div class="address">
      <div class="address_detail">
        <div class="user_info">
          <div class="user_name">收货人:{{myaddress.userName}}</div>
          <div class="user_address">{{myaddress.all}}</div>
        </div>
        <div class="user_phone">{{myaddress.telNumber}}</div>
      </div>
    </div>
    <!-- 购物车区域 -->
    <div class="cart_content">
      <!-- 购物车文字 -->
      <div class="cart_title">购物车</div>
      <!-- 主体 -->
      <div class="cart_main">
        <!-- 每项 -->
        <div
          class="cart_item"
          v-for="(item,index) in payList"
          :key="index"
          :goods_id="item.goods_id"
        >
          <!-- 图片 -->
          <navigator class="cart_pic" url>
            <img mode="widthFix" :src="item.goods_small_logo" />
          </navigator>
          <!-- 商品信息 -->
          <div class="cart_info">
            <div class="goods_name">{{item.goods_name}}</div>
            <div class="goods_price_wrap">
              <div class="goods_price">${{item.goods_price}}</div>
              <div class="goods_num">x {{item.num}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer_tool">
      <!-- 总价格 -->
      <div class="total_price_wrap">
        <div class="total_price">
          合计:
          <span class="price_text">{{totalPrice}}</span>
        </div>
        <div class="yunfei">包含运费</div>
      </div>
      <!-- 结算 -->
      <div class="total_pay_wrap" @click="handleCreateOrder">
        <span>支付({{totalNum}})</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myaddress: {}, // 购物地址
      cart: [], // 购物车列表
      totalPrice: 0, // 总价
      totalNum: 0, // 总件数
      payList: []
    }
  },
  methods: {
    // 创建订单
    handleCreateOrder() {
      const token = JSON.parse(localStorage.getItem('token'))
      // 如果没登路
      if (!token) {
        // 去登录页面
      }
      // 有token ,创建请求头
      // const header = { Authorization: token }
    },
    // 设置购物车状态: 总数 总价 勾选--公用事件
    setCart(cart) {
      // 总价,总数
      let totalPrice = 0
      let totalNum = 0
      const payList = []
      // 遍历
      cart.forEach(v => {
        // 如果勾选则添加列表
        if (v.check) {
          totalPrice += v.num * v.goods_price
          totalNum += v.num
          payList.push(v)
        }
      })
      console.log('payList', payList)
      localStorage.setItem('cart', JSON.stringify(cart))
      // 提交数据
      this.cart = cart
      this.totalPrice = totalPrice
      this.totalNum = totalNum
      this.payList = payList
    }
  },
  // 监听页面显示
  created() {
    this.myaddress = JSON.parse(localStorage.getItem('myaddress'))
    this.cart = JSON.parse(localStorage.getItem('cart')) || []
    this.setCart(this.cart)
  }
}
</script>

<style lang='less' scope>
page {
  padding-bottom: 90rpx;
}

// 地址
.address {
  padding: 10px;

  .address_detail {
    width: 100%;
    display: flex;
    font-size: 14px;

    .user_info {
      flex: 5;
    }

    .user_phone {
      flex: 3;
      text-align: center;
    }
  }
}

// 购物车区域
.cart_content {
  .cart_title {
    padding: 10px;
    font-size: 18px;
    color: var(--themeColor);
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
  }

  .cart_main {
    width: 100%;

    .cart_item {
      padding: 5x;
      display: flex;
      border-bottom: 1px solid #ccc;

      .cart_pic {
        flex: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;

        image {
          width: 80%;
        }
      }

      .cart_info {
        flex: 4;
        display: flex;
        // 上下排
        flex-direction: column;
        justify-content: space-around;
        align-items: center;

        // 上 - 名字
        .goods_name {
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          color: #666;
        }

        // 下 - 价格
        .goods_price_wrap {
          display: flex;
          width: 100%;
          justify-content: space-around;

          // 价格数字
          .goods_price {
            color: var(--themeColor);
            font-size: 17px;
          }

          // 增减按钮
          .goods_num {
            width: 27.5px;
            height: 27.5px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }
}

// 底部
.footer_tool {
  position: fixed;
  left: 0;
  bottom: 50px;
  width: 100%;
  height: 45px;
  background-color: #fff;

  display: flex;
  justify-content: center;
  align-items: center;

  // 左
  .total_price_wrap {
    flex: 2;
    text-align: right;
    padding-right: 7.5px;

    .total_price {
      .price_text {
        color: var(--themeColor);
        font-size: 17px;
        font-weight: 600;
      }
    }
  }

  // 右
  .total_pay_wrap {
    flex: 1;
    background-color: var(--themeColor);
    height: 100%;
    color: #fff;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
